<template>
	<div>
		<el-row :gutter="24" v-if="interFaceShow == 'report'">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.dict" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.brand" @change="getCompanyInfo" placeholder="请选择品牌" clearable>
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">出单日期 :</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="mapData.time" size="small" style="width:100%" type="month" clearable placeholder="选择时间">
				</el-date-picker>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">保险类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.insureType" @change="insureTypeChange" placeholder="">
					<el-option label="新保" value="sb"></el-option>
					<el-option label="续保" value="xb"></el-option>
				</el-select>
			</el-col>
			<el-col :span="2">
				<el-button size="small" type="primary" @click="query">查询</el-button>
			</el-col>
			<el-col :span="15" style="text-align: right;">
				<el-button size="small" type="primary" @click="reportShowChange">报表说明</el-button>
			</el-col>
			<el-col v-if="mapData.insureType == 'sb'" :span="2" style="margin-left: -10px; text-align: right;">
				<el-button size="small" type="primary" @click="monthSbReportOut" v-loading.fullscreen.lock="fullscreenloading" v-if="btnGroup.export">导出</el-button>
			</el-col>
			<el-col v-if="mapData.insureType == 'xb'" :span="2" style="margin-left: -10px; text-align: right;">
				<el-button size="small" type="primary" @click="monthXbReportOut" v-loading.fullscreen.lock="fullscreenloading" v-if="btnGroup.export">导出</el-button>
			</el-col>
		</el-row>
		<el-row v-if="mapData.insureType == 'sb'">
			<div class="report_Fixedwidth">
				<table class="report_table" id="monthSbReport" cellspacing="0" cellpadding="0" :width="tableWidth">
					<tbody>
						<tr class="texttbody" height="60px">
							<th scope="col" style="width:200px" rowspan="4">4S店</th>
							<th scope="col" style="width:100px" rowspan="4">新车本地销</th>
							<th scope="col" style="width:100px" rowspan="4">投保率(本地销)</th>
							<th scope="col" style="width:100px" rowspan="4">新车总销量</th>
							<th scope="col" style="width:100px" rowspan="4">投保率(总销量)</th>
							<th scope="col" style="width:100px" rowspan="4">新车投保率标准</th>
							<th scope="col" rowspan="3" colspan="2">本月新保总笔数</th>
							<th scope="col" style="width:100px" rowspan="4">月度预算分解投保笔数</th>
							<th scope="col" style="width:100px" rowspan="4">月度预算分解完成率</th>
							<th scope="col" rowspan="3" colspan="2">本年累计新保完成笔数</th>
							<th scope="col" style="width:100px" rowspan="4">本年累计新车总销量</th>
							<th scope="col" style="width:100px" rowspan="4">本年累计投保率</th>
							<th scope="col" style="width:100px" rowspan="4">全年新保预算笔数</th>
							<th scope="col" style="width:100px" rowspan="4">全年预算完成率</th>
							<th scope="col" :colspan="colspanNum">新保</th>
							<th scope="col" colspan="12">新保保费</th>
							<th scope="col" colspan="10">新保毛利</th>
						</tr>
						<tr class="texttbody" height="60px">
							<template v-for="monthItem in companyAll">
								<th scope="col" colspan="4">{{monthItem.insuranceCompanyName}}</th>
							</template>
							<th scope="col" style="width:100px" rowspan="3">上年同期新保个数(商业+交强)</th>
							<th scope="col" style="width:100px" rowspan="3">同比</th>
							<th scope="col" style="width:100px" rowspan="3">本月保费规模(含单交强)</th>
							<th scope="col" style="width:100px" rowspan="3">月度预算分解保费规模 </th>
							<th scope="col" style="width:100px" rowspan="3">月度预算分解保费规模完成率</th>
							<th scope="col" style="width:100px" rowspan="3">上年同期保费</th>
							<th scope="col" style="width:100px" rowspan="3">同比</th>
							<th scope="col" style="width:100px" rowspan="3">本月单车保费</th>
							<th scope="col" style="width:100px" rowspan="3">全年累计保费规模</th>
							<th scope="col" style="width:100px" rowspan="3">全年累计预算分解保费规模</th>
							<th scope="col" style="width:100px" rowspan="3">全年累计预算分解保费规模完成率</th>
							<th scope="col" style="width:100px" rowspan="3">全年累计单车保费</th>
							<th scope="col" style="width:100px" rowspan="3">全年预算保费规模</th>
							<th scope="col" style="width:100px" rowspan="3">全年预算保费规模完成率</th>
							<th scope="col" colspan="4">本月新保净毛利</th>
							<th scope="col" colspan="4">本年累计新保净毛利 </th>
							<th scope="col" style="width:100px" rowspan="3">本月新保单笔净毛利</th>
							<th scope="col" style="width:100px" rowspan="3">本年累计新保单笔净毛利</th>
						</tr>
						<tr class="texttbody" height="60px">
							<template v-for="monthItem in companyAll">
								<th scope="col" colspan="2">个数</th>
								<th scope="col" colspan="2">签单保费</th>
							</template>
							<th scope="col" style="width:100px" rowspan="2">本月代理费</th>
							<th scope="col" style="width:100px" rowspan="2">本月优惠</th>
							<th scope="col" style="width:100px" rowspan="2">本月赠送项目成本</th>
							<th scope="col" style="width:100px" rowspan="2">本月净毛利</th>
							<th scope="col" style="width:100px" rowspan="2">累计代理费</th>
							<th scope="col" style="width:100px" rowspan="2">累计优惠</th>
							<th scope="col" style="width:100px" rowspan="2">累计赠送项目成本</th>
							<th scope="col" style="width:100px" rowspan="2">全年净毛利</th>
						</tr>
						<tr class="texttbody" height="60px">
							<th scope="col" style="width: 100px;">商业+交强</th>
							<th scope="col" style="width: 100px;">单交强</th>
							<th scope="col" style="width: 100px;">商业+交强</th>
							<th scope="col" style="width: 100px;">单交强</th>
							<template v-for="monthItem in companyAll">
								<th scope="col" style="width: 100px;">商业+交强</th>
								<th scope="col" style="width: 100px;">单交强</th>
								<th scope="col" style="width: 100px;">商业+交强</th>
								<th scope="col" style="width: 100px;">单交强</th>
							</template>
						</tr>
						<tr v-for="tableItem in tableData.dataList">
							<td>{{tableItem.oName}}</td>  <!--4S店 -->
							<td>{{tableItem.monthCarSales}}</td> <!-- 新车本地销-->
							<td>{{tableItem.monthFromcarOrderRatio}}</td> <!--投保率（本地销） -->
							<td>{{tableItem.monthCarAllSales}}</td> <!--新车总销量 -->
							<td>{{tableItem.monthCarOrderRatio}}</td> <!--投保率（总销量） -->
							<td></td> <!-- 新车投保率标准-->
							<td>{{tableItem.monthSSales}}</td> <!--本月新保总笔数 商业+交强-->
							<td>{{tableItem.monthJSales}}</td> <!--本月新保总笔数 单交强-->
							<td></td> <!-- 月度预算分解投保笔数-->
							<td></td> <!-- 月度预算分解完成率-->
							<td>{{tableItem.orderSales}}</td> <!-- 本年累计新保完成笔数 商业+交强-->
							<td>{{tableItem.orderDjSales}}</td> <!--本年累计新保完成笔数 单交强-->
							<td>{{tableItem.yearCarSales}}</td> <!--本年累计新车总销量 -->
							<td>{{tableItem.yearOrderRatio}}</td> <!--本年累计投保率 -->
							<td></td> <!-- 全年新保预算笔数-->
							<td></td> <!--全年预算完成率 -->
							<template v-for="monthItem in companyAll"> <!--保险公司循环展示 -->
								<td>{{tableItem[monthItem.js]}}</td> <!--个数 商业+交强 -->
								<td>{{tableItem[monthItem.dj]}}</td> <!--个数  单交强-->
								<td>{{tableItem[monthItem.jsPrice]}}</td> <!--签单保费 商业+交强 -->
								<td>{{tableItem[monthItem.djPrice]}}</td> <!--签单保费 单交强-->
							</template> 
							<td>{{tableItem.nMonthOrderSales}}</td> <!--上年同期新保个数 商业+交强 -->
							<td>{{tableItem.onYearBaseOrderSales}}</td> <!--同比 -->
							<td>{{tableItem.monthOrderPrice}}</td> <!--新保保费 本月保费规模 （含单交强） -->
							<td></td> <!--新保保费  月度预算分解保费规模 -->
							<td></td> <!--新保保费 月度预算分解保费规模完成率 -->
							<td>{{tableItem.nMonthOrderPrice}}</td> <!--新保保费 上年同期保费-->
							<td>{{tableItem.onYearBaseOrderPrice}}</td> <!--新保保费 同比-->
							<td>{{tableItem.monthOneCarOrderPrice}}</td> <!--新保保费 本月单车保费-->
							<td>{{tableItem.yearOrderPrice}}</td> <!--新保保费 全年累计保费规模-->
							<td></td> <!--新保保费 全年累计预算分解保费规模-->
							<td></td> <!--新保保费 全年累计预算分解保费规模完成率-->
							<td>{{tableItem.yearOneCarOrderPrice}}</td> <!--新保保费 全年累计单车保费-->
							<td></td> <!--新保保费 全年预算保费规模-->
							<td></td> <!--新保保费 全年预算保费规模完成率-->
							<td>{{tableItem.monthOrderCommissionPrice}}</td> <!--新保毛利 本月新保净毛利  本月代理费-->
							<td>{{tableItem.monthOrderBackPrice}}</td> <!--新保毛利 本月新保净毛利  本月优惠-->
							<td>{{tableItem.monthOrderCouponPrice}}</td> <!--新保毛利 本月新保净毛利  本月赠送项目成本-->
							<td>{{tableItem.monthNteProfit}}</td> <!--新保毛利 本月新保净毛利  本月净毛利-->
							<td>{{tableItem.yearOrderCommissionPrice}}</td> <!--新保毛利  本年累计新保净毛利 累计代理费-->
							<td>{{tableItem.yearOrderBackPrice}}</td> <!--新保毛利 本年累计新保净毛利 累计优惠-->
							<td>{{tableItem.yearOrderCouponPrice}}</td> <!--新保毛利 本年累计新保净毛利 累计赠送项目成本-->
							<td>{{tableItem.yearNteProfit}}</td> <!--新保毛利 本年累计新保净毛利 	全年净毛利-->
							<td>{{tableItem.monthOrderGrossProfit}}</td> <!--新保毛利 本月新保单笔净毛利-->
							<td>{{tableItem.yearOrderGrossProfit}}</td> <!--新保毛利 本年累计新保单笔净毛利-->
						</tr>
					</tbody>
				</table>
			</div>
		</el-row>
		<el-row v-if="mapData.insureType == 'xb'">
			<div class="report_Fixedwidth">
				<table class="report_table" id="monthXbReport" cellspacing="0" cellpadding="0" width="8000px">
					<tbody>
						<tr class="texttbody" height="60px">
							<th scope="col" style="width: 200px;" rowspan="4">4S店</th>
							<th scope="col" style="width: 100px;" rowspan="4">认定续保个数（含联保）</th>
							<th scope="col" style="width: 100px;" rowspan="4">认定续保保费（含联保）</th>
							<th scope="col" rowspan="3" colspan="2">本月续保总笔数</th>
							<th scope="col" style="width: 100px;" rowspan="4">本月续保达成率</th>
							<th scope="col" colspan="4" rowspan="2">联保</th>
							<th scope="col" rowspan="1" :colspan="colspanNumXb">本月续保数量</th>
							<th scope="col" rowspan="3" colspan="2">本年累计续保总完成笔数</th>
							<th scope="col" style="width: 100px;" rowspan="4">本年累计续保分解笔数</th>
							<th scope="col" style="width: 100px;" rowspan="4">本年累计续保完成率</th>
							<th scope="col" style="width: 100px;" rowspan="4">全年续保预算笔数</th>
							<th scope="col" style="width: 100px;" rowspan="4">全年预算完成率</th>
							<th scope="col" rowspan="1" colspan="12">续保保费</th>
							<th scope="col" rowspan="1" colspan="10">续保毛利</th>
						</tr>
						<tr class="texttbody" height="60px">
							<template v-for="monthItem in companyAll">
								<th scope="col" colspan="4">{{monthItem.insuranceCompanyName}}</th>
							</template>
							<th scope="col" style="width: 100px;" rowspan="3">上年同期个数</th>
							<th scope="col" style="width: 100px;" rowspan="3">同比</th>
							<th scope="col" style="width: 100px;" rowspan="3">本月续保分解笔数</th>
							<th scope="col" style="width: 100px;" rowspan="3">本月保费规模(商业+交强)</th>
							<th scope="col" style="width: 100px;" rowspan="3">月度预算分解保费</th>
							<th scope="col" style="width: 100px;" rowspan="3">月度预算分解保费规模完成率</th>
							<th scope="col" style="width: 100px;" rowspan="3">上年年同期保费</th>
							<th scope="col" style="width: 100px;" rowspan="3">同比</th>
							<th scope="col" style="width: 100px;" rowspan="3">本月单车保费</th>
							<th scope="col" style="width: 100px;" rowspan="3">全年累计保费</th>
							<th scope="col" style="width: 100px;" rowspan="3">全年累计单车保费</th>
							<th scope="col" style="width: 100px;" rowspan="3">全年累计分解保费规模</th>
							<th scope="col" style="width: 100px;" rowspan="3">全年累计保费规模完成率</th>
							<th scope="col" style="width: 100px;" rowspan="3">全年预算保费(商业+交强) </th>
							<th scope="col" style="width: 100px;" rowspan="3">全年预算保费规模完成率</th>
							<th scope="col" rowspan="1" colspan="4">本月续保净毛利 </th>
							<th scope="col" rowspan="1" colspan="4">本年累计续保净毛利 </th>
							<th scope="col" style="width: 100px;" rowspan="3">本月续保单笔净毛利</th>
							<th scope="col" style="width: 100px;" rowspan="3">全年续保单笔净毛利</th>
						</tr>
						<tr class="texttbody" height="60px">
							<th scope="col" colspan="2">联保业务需计入</th>
							<th scope="col" style="width: 100px;" rowspan="2">本月联保续保交强险个数</th>
							<th scope="col" style="width: 100px;" rowspan="2">联保续保率</th>
							<template v-for="monthItem in companyAll">
								<th scope="col" colspan="2">个数</th>
								<th scope="col" colspan="2">签单保费</th>
							</template>
							<th scope="col" style="width: 100px;" rowspan="2">本月代理费</th>
							<th scope="col" style="width: 100px;" rowspan="2">本月优惠</th>
							<th scope="col" style="width: 100px;" rowspan="2">本月赠送成本</th>
							<th scope="col" style="width: 100px;" rowspan="2">本月净毛利</th>
							<th scope="col" style="width: 100px;" rowspan="2">累计代理费</th>
							<th scope="col" style="width: 100px;" rowspan="2">累计优惠</th>
							<th scope="col" style="width: 100px;" rowspan="2">全年累计赠送成本</th>
							<th scope="col" style="width: 100px;" rowspan="2">全年净毛利</th>
						</tr>
						<tr class="texttbody" height="60px">
							<th scope="col" style="width: 100px;" >商业+交强</th>
							<th scope="col" style="width: 100px;" >单交强</th>
							<th scope="col" style="width: 100px;" >计入个数</th>
							<th scope="col" style="width: 100px;" >计入保费</th>
							<template v-for="monthItem in companyAll">
								<th scope="col" style="width: 100px;">商业+交强</th>
								<th scope="col" style="width: 100px;">单交强</th>
								<th scope="col" style="width: 100px;">商业+交强</th>
								<th scope="col" style="width: 100px;">单交强</th>
							</template>
							<th scope="col" style="width: 100px;" >商业+交强</th>
							<th scope="col" style="width: 100px;" >单交强</th>
						</tr>
						<tr v-for="tableItem in tableData.dataList">
							<td>{{tableItem.oName}}</td> <!--4S店 -->
							<td>{{tableItem.monthCarOrderSales}}</td> <!--认定续保个数（含联保） -->
							<td>{{tableItem.monthOrderPrice}}</td> <!--认定续保保费（含联保） -->
							<td>{{tableItem.monthSSales}}</td> <!--本月续保总笔数 商业+交强-->
							<td>{{tableItem.monthJSales}}</td> <!--本月续保总笔数 单交强-->
							<td></td> <!--本月续保达成率 -->
							<td></td> <!--联保 联保业务需计入 计入个数-->
							<td></td> <!--联保 联保业务需计入 计入保费-->
							<td></td> <!--联保 本月联保续保交强险个数-->
							<td></td> <!--联保 联保续保率-->
							
							<template v-for="monthItem in companyAll"> <!--保险公司循环展示 -->
								<td>{{tableItem[monthItem.js]}}</td> <!--个数 商业+交强 -->
								<td>{{tableItem[monthItem.dj]}}</td> <!--个数  单交强-->
								<td>{{tableItem[monthItem.jsPrice]}}</td> <!--签单保费 商业+交强 -->
								<td>{{tableItem[monthItem.djPrice]}}</td> <!--签单保费 单交强-->
							</template> 
							
							<td>{{tableItem.nMonthOrderSales}}</td> <!--上年同期个数 -->
							<td>{{tableItem.onYearBaseOrderSales}}</td> <!--同比 -->
							<td></td> <!--本月续保分解笔数 -->
							<td>{{tableItem.orderSales}}</td> <!--本年累计续保总完成笔数 商业+交强-->
							<td>{{tableItem.orderDjSales}}</td> <!--本年累计续保总完成笔数 单交强-->
							<td></td> <!--本年累计续保分解笔数 -->
							<td></td> <!--本年累计续保完成率 -->
							<td></td> <!--全年续保预算笔数 -->
							<td></td> <!--全年预算完成率 -->
							<td>{{tableItem.monthOrderPrice}}</td> <!--续保保费 本月保费规模商业+交强 -->
							<td></td> <!--续保保费 月度预算分解保费 -->
							<td></td> <!--续保保费 月度预算分解保费规模完成率-->
							<td>{{tableItem.nMonthOrderPrice}}</td> <!--续保保费 上年同期保费-->
							<td>{{tableItem.onYearBaseOrderPrice}}</td> <!--续保保费 同比-->
							<td>{{tableItem.monthOneCarOrderPrice}}</td> <!--续保保费 本月单车保费-->
							<td>{{tableItem.yearOrderPrice}}</td> <!--续保保费 全年累计保费-->
							<td>{{tableItem.yearOneCarOrderPrice}}</td> <!--续保保费 全年累计单车保费-->
							<td></td> <!--续保保费 全年累计分解保费规模-->
							<td></td> <!--续保保费 全年累计保费规模完成率-->
							<td></td> <!--续保保费 全年预算保费 商业+交强-->
							<td></td> <!--续保保费 全年预算保费规模完成率-->
							<td>{{tableItem.monthOrderCommissionPrice}}</td> <!--续保毛利 本月续保净毛利 本月代理费-->
							<td>{{tableItem.monthOrderBackPrice}}</td> <!--续保毛利 本月续保净毛利 本月优惠-->
							<td>{{tableItem.monthOrderCouponPrice}}</td> <!--续保毛利 本月续保净毛利 本月赠送成本-->
							<td>{{tableItem.monthNteProfit}}</td> <!--续保毛利 本月续保净毛利 本月净毛利-->
							<td>{{tableItem.yearOrderCommissionPrice}}</td> <!--续保毛利 本年累计续保净毛利 累计代理费-->
							<td>{{tableItem.yearOrderBackPrice}}</td> <!--续保毛利 本年累计续保净毛利 累计优惠-->
							<td>{{tableItem.yearOrderCouponPrice}}</td> <!--续保毛利 本年累计续保净毛利 全年累计赠送成本-->
							<td>{{tableItem.yearNteProfit}}</td> <!--续保毛利 本年累计续保净毛利 全年净毛利-->
							<td>{{tableItem.monthOrderGrossProfit}}</td> <!--续保毛利 本月续保单笔净毛利 本月续保单笔净毛利-->
							<td>{{tableItem.yearOrderGrossProfit}}</td> <!--续保毛利 全年续保单笔净毛利 全年续保单笔净毛利-->
						</tr>
					</tbody>
				</table>
			</div>
		</el-row>
			<!--<el-table :data="tableData.dataList" border @cell-dblclick="dblclick">
				<el-table-column label="品牌" prop="carBrand" width="120"></el-table-column>
				<el-table-column label="区域" prop="disp" width="120"></el-table-column>
				<el-table-column label="4S店" prop="oName" width="150"></el-table-column>
					<el-table-column label="新保">
						<el-table-column label="新保个数" prop="sbAmount" width="120"></el-table-column>
						<el-table-column label="上年同期" prop="sbQAmount" width="120"></el-table-column>
						<el-table-column label="同比" :formatter="sbCOv" width="120"></el-table-column>
						<el-table-column label="新保保费规模" prop="sbAllprice" width="150"></el-table-column>
						<el-table-column label="新保代理费" prop="sbAllcommissionPrice" width="150"></el-table-column>
						<el-table-column label="新保优惠" prop="sbAllbackPrice" width="120"></el-table-column>
						<el-table-column label="新保赠送成本" prop="sbCouponPrice" width="150"></el-table-column>
						<el-table-column label="新保毛利" :formatter="sbprofitCov" width="120"></el-table-column>
					</el-table-column>
					<el-table-column label="续保">
						<el-table-column label="续保个数" prop="xbAmount" width="120"></el-table-column>
						<el-table-column label="上年同期" prop="xbQAmount" width="120"></el-table-column>
						<el-table-column label="同比" :formatter="xbCOv" width="120"></el-table-column>
						<el-table-column label="续保保费规模" prop="xbAllprice" width="150"></el-table-column>
						<el-table-column label="续保代理费" prop="xbAllcommissionPrice" width="150"></el-table-column>
						<el-table-column label="续保优惠" prop="xbAllbackPrice" width="120"></el-table-column>
						<el-table-column label="续保赠送成本" prop="xbCouponPrice" width="150"></el-table-column>
						<el-table-column label="续保毛利" :formatter="xbprofitCov" width="120"></el-table-column>
					</el-table-column>
			</el-table>
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
			</el-pagination>-->
		<insurancePolicy v-if="interFaceShow == 'order'" :show="interFaceShow" :data="orderMapData" v-on:showChange="back"></insurancePolicy>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>
	    <el-dialog title="报表说明" v-model="reportShow" size="tiny">
			<div style="overflow-y: scroll;height: 400px;">
				<b style="font-size: 15px;">新车本地销：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月在本店销售的车辆数；</b><br><br>
				<b style="font-size: 15px;">投保率（本地销）：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月本店销售车辆投保个数/本月本店销售车辆；</b><br><br>
				<b style="font-size: 15px;">新车总销量：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月总销售车辆数；</b><br><br>
				<b style="font-size: 15px;">投保率：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月销售车辆投保个数/本月新车总销量；</b><br><br>
				<b style="font-size: 15px;">新车投保率保准：</b>&nbsp;&nbsp;<b style="font-size: 12px;">导出后用户手动填写；</b><br><br>
				<b style="font-size: 15px;">本年累计新车总销量：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本年总销售车辆数；</b><br><br>
				<b style="font-size: 15px;">本年累计投保率：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本年销售车辆投保个数/本年累计新车总销量；</b><br><br>
				<b style="font-size: 15px;">新保保费-同比：</b>&nbsp;&nbsp;<b style="font-size: 12px;">（今年同期保费-去年同期保费）/去年同期保费；</b><br><br>
				<b style="font-size: 15px;">本月单车保费：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月新保总保费/本月新车销售数量；</b><br><br>
				<b style="font-size: 15px;">全年累计单车保费：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本年新保总保费/本年新车销售数量；</b><br><br>
				<b style="font-size: 15px;">本月代理费：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月新保总佣金；</b><br><br>
				<b style="font-size: 15px;">本月优惠	：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月新保总返现；</b><br><br>
				<b style="font-size: 15px;">本月赠送项目成本：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月赠送总成本；</b><br><br>
				<b style="font-size: 15px;">本月净毛利：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月代理费-本月优惠-本月赠送成本；</b><br><br>
				<b style="font-size: 15px;">本年代理费：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本年新保总佣金；</b><br><br>
				<b style="font-size: 15px;">本年优惠：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本年新保总返现；</b><br><br>
				<b style="font-size: 15px;">本年赠送项目成本：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本年赠送总成本；</b><br><br>
				<b style="font-size: 15px;">本年净毛利：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本年代理费-本年优惠-本年赠送成本；</b><br><br>
				<b style="font-size: 15px;">本月新保单笔净毛利：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本月代理费/本月销售车辆数；</b><br><br>
				<b style="font-size: 15px;">本年累计新保单笔净毛利：</b>&nbsp;&nbsp;<b style="font-size: 12px;">本年代理费/本年销售车辆数；</b><br><br>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import insurancePolicy from '../assembly/insurancePolicy.vue'
	import exports from '../../plugins/exportModule.vue'
	export default {
		data: function() {
			return {
				//报表说明
				reportShow: false,
				//表格数据导出
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//表格名字
				excelName: "保险月报表.xls",
				//表格表头宽度
				tableWidth: '',
				//新保合并单元格数
				colspanNum: 24,
				//续保合并单元格数
				colspanNumXb:0,
				//保险公司
				companyAll: [],
				//查询条件
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				interFaceShow: "report",
				fullscreenloading: false,
				CurentPage: 1,
				page: this.page,
				//区域
				regionCombo: [],
				//时间
				//4S店
				storeCombo: [],
				//品牌
				brandCombo: [],
				//表格数据
				tableData: {
					total: 0,
					dataList: []
				},
				mapData: {
					dict: '',
					time: new Date(),
					companyId: '',
					brand: '',
					insureType: 'sb',
				},
				//保险单查询条件
				orderMapData: {
					companyId: '',
					insureType: '',
					outOrderStartDate: "",
					outOrderStopDate: "",
					brand: '',
					dict: '',
				},

				btnGroup: {},
			}
		},
		computed: {
			//投保率本地销计算
			toubaoRate: function(item) {
				debugger;
				return item.monthCarSales / item.monthFromCarOrderSales;
			},
		},
		methods: {
			//查询条件保险类型转换时触发方法
			insureTypeChange: function(){
				//清空表格数据
				this.$data.tableData.dataList = [];
				//调用查询方法
				this.query();
			},
			reportShowChange: function(){
				this.$data.reportShow = true;
			},
			//导出新保
			monthSbReportOut: function() {
				debugger;
				this.$data.tableId = "monthSbReport";
				this.$data.template = "<template><div><el-row><div><table border='1'>{table}</table></div></el-row></div></template>";
			},
			//导出续保
			monthXbReportOut: function() {
				debugger;
				this.$data.tableId = "monthXbReport";
				this.$data.template = "<template><div><el-row><div><table border='1'>{table}</table></div></el-row></div></template>";
			},
			//导出回调函数
			backFunction: function() {
				this.$data.tableId = "";
			},
			//获取月份第一天
			getMonthFirstDay: function(data) {
				var oldData = new Date(data);
				var newDate = oldData.setDate(1);
				return this.moment(newDate).format("YYYY-MM-DD");
			},
			//获取月最后一天
			getNomthLastDay: function(data) {
				var oldData = new Date(data);
				var currentMonth = oldData.getMonth();
				var nextMonth = ++currentMonth;
				var nextMonthFirstDay = new Date(oldData.getFullYear(), nextMonth, 1);
				var oneDay = 1000 * 60 * 60 * 24;
				var newDate = new Date(nextMonthFirstDay - oneDay)
				return this.moment(newDate).format("YYYY-MM-DD");
			},
			//组件回调函数
			back: function() {
				this.$data.interFaceShow = "report";
				this.query();
			},
			//日报表双击单元格
			dblclick: function(row, column, cell, event) {
				debugger;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				} else {
					this.$data.mapData.time = new Date();
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				}
				if(column.property == "sbAmount") {
					this.$data.orderMapData.companyId = row.companyId;
					this.$data.orderMapData.insureType = "sb";
					this.$data.orderMapData.dict = this.$data.mapData.dit;
					this.$data.orderMapData.brand = this.$data.mapData.brand;
					this.$data.orderMapData.outOrderStartDate = this.getMonthFirstDay(this.$data.mapData.time);
					this.$data.orderMapData.outOrderStopDate = this.getNomthLastDay(this.$data.mapData.time);
					this.$data.interFaceShow = "order";
				} else if(column.property == "xbAmount") {
					this.$data.orderMapData.companyId = row.companyId;
					this.$data.orderMapData.insureType = "xb";
					this.$data.orderMapData.dict = this.$data.mapData.dit;
					this.$data.orderMapData.brand = this.$data.mapData.brand;
					this.$data.orderMapData.outOrderStartDate = this.getMonthFirstDay(this.$data.mapData.time);
					this.$data.orderMapData.outOrderStopDate = this.getNomthLastDay(this.$data.mapData.time);
					this.$data.interFaceShow = "order";
				}
			},
			//月报表导出
			monthReportOut: function() {
				this.$data.fullscreenloading = true;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				} else {
					this.$data.mapData.time = '';
				}
				this.$http.post(this.API_ROOT + '/insurance/statstics/month/indurance/statstics/exp/excel', this.$data.mapData, {
						params: {}
					})
					.then(resp => {
						this.$data.fullscreenloading = false;
						if(resp.data.success) {

							window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + resp.data.data + "&&fileName=保险月报表-" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
						}
					}, resp => {});
			},
			handleSizeChange: function() {

			},
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			query: function() {
				debugger;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM");
				}
				if(this.$data.mapData.companyId == "") {
					this.$message.error("请选择公司！");
				} else {
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/insurance/statstics/month', //url
						body: this.$data.mapData,
						params: { //发送的参数
							start: this.$data.CurentPage,
							limit: this.page.pageSize,
						}
					}).then(function(resp) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData = resp.data;
					}, function(error) {
						// error
					})
				}
			},
			//新保同比计算
			sbCOv: function(row, column) {

			},
			//新保同比计算
			sbprofitCov: function(row, column) {

			},
			//续保同比计算
			xbCOv: function(row, column) {

			},
			//新保同比计算
			xbprofitCov: function(row, column) {

			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.mapData.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.mapData.dict,
						brand: this.$data.mapData.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.mapData.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				//获取功品牌下拉
				this.$http.get(this.API_ROOT + '/rbac/dept/brand/all', {}).then((response) => {
					this.$data.brandCombo = response.data.dataList;
				}, (response) => {});
			},
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
			//获取保险公司
			this.$http.get(this.API_ROOT + '/insurance/companys', {
				params: {}
			}).then((response) => {
				debugger;
				this.$data.companyAll = response.data.data;
				//表格宽度
				this.$data.tableWidth = 4200 + 400 * (this.$data.companyAll.length) + "px";
				//当周当月合并单元格数
				this.$data.colspanNum = this.$data.companyAll.length * 4 + 2;
				//本月续保数量合并单元格数
				this.$data.colspanNumXb = this.$data.companyAll.length * 4 + 3;
			}, (response) => {
				debugger;
			});

			//获取按钮权限
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
				params: { //发送的参数
					resPath: "bx/monthReport", ////查询条件 按照输入的车牌号
				}
			}).then(function(resp) {
				debugger;
				var btnData = resp.data.dataList;

				var temp = {};

				for(var i = 0; i < btnData.length; i++) {

					var btnName = btnData[i].btnName;

					temp[btnName] = btnName;

				}

				Object.assign(this.$data.btnGroup, temp);
			}, function(error) {
				// error
			});
		},
		components: {
			insurancePolicy,
			exports
		}
	}
</script>

<style>

</style>